<template>
    <div>
         <div class="weight"  v-if="nowShow">
                      <div class="weight-top">
                          <i class="weight-icon" :style= "'background-image: url('+$qiniu.url+'assets/img/course.png)'"></i>
                          <span>体重</span>
                          <div class="today-weight">{{ showWeight.weight }}kg</div>
                      </div>
                      <div class="weight-bottom" v-if="showWeight.weight">
                          <span class="ruguo">今日已输入！</span>
                      </div>
                      <div class="weight-bottom" v-else>
                          <input type="text"  id="weight" @click="showActive" placeholder="请输入体重..."  class="weight-num">
                          <input type="button" @click="computedWeight" class="btn" id="weightBtn">
                      </div>
                      <div class="weight-computed">
                         <img :src="$qiniu.url+'assets/img/weight.png'">
                     </div>
        </div>
    </div>
</template>
<script>
import Loading from '../loading';
import {isLeap,setCalendar,getToday,errFun} from "../../tools.js";
import "../../../static/css/table-calendar.css";
import api from "../../api";
export default{
    computed:{
        nowShow(){
            //判断当前的today是否是今日
            var nowDay=getToday(new Date()).day;//获取当前的时间---即今天的日期
            var nowMonth=getToday(new Date()).month;
            var nowYear=getToday(new Date()).year;
            if(this.today.day<nowDay||this.today.month<nowMonth||this.today.year<nowYear){
                 return false;
            }else{
                return true;
            }
        },
        //显示体重
        showWeight(){
            return this.$store.state.weight;
        }
    },
    data(){
        return {
            // weight:null,
        }
    },
    created(){
        this.$store.dispatch('GET_WEIGHT');
    },
    props:['today'],
    methods:{
         computedWeight(){
          var weight=document.querySelector("#weight");
          var weightBtn=document.querySelector("#weightBtn");
          var todayWeight=document.querySelector(".today-weight");
          var weightComputed=document.querySelector(".weight-computed");
          if(weight.value=="今日已输入！"){
              weightBtn.disabled=true;
              return false;
          }
          weightComputed.style.displays="block";
          todayWeight.innerHTML=weight.value+"kg";
          api.getHeart(weight.value).then(function(result){
              weight.style.background="none";
              weightBtn.classList.remove("active");
              weight.value="今日已输入！";
              weightComputed.style.display="none";
          },errFun)
      },
      showActive(){
            var weight=document.querySelector("#weight");
            var weightBtn=document.querySelector("#weightBtn");
            var todayWeight=document.querySelector(".today-weight");
            if(weight.value=="今日已输入！"){
                    weight.disabled=true;
                    return false;
             }
            weight.style.background="#fff";
            weightBtn.classList.add("active");
      },
    },
}
</script>
<style scoped>
.weight{
    width:100%;
    height:100px;
    background:#31384b;
    margin-bottom:15px;
    position:relative;
    color:#d7d6db;
}
.weight .weight-top{
    width:100%;
    height:50px;
    border-bottom:1px solid #22293b;
    position:relative;
}
.weight .weight-top .weight-icon{
    display:block;
    position:absolute;
    top:0px;
    left:10px;
    transform:translateY(30%);
    width: 30px;
    height: 30px;
    background-position:-38px 0 ;
    background-repeat:no-repeat;
    background-size:  300px 40px;
}
.weight .weight-top span{
    width:40px;
    display:block;
    margin-left:46px;
    text-align:center;
    font-size:16px;
    line-height: 50px;
}
.weight .weight-top .today-weight{
    width:40px;
    position:absolute;
    top:0px;
    right:25px;
    text-align:center;
    font-size:16px;
    line-height: 50px;
}
.weight .weight-bottom{
    width:100%;
    height:50px;
    position:relative;
}
.weight .weight-bottom .ruguo{
    display: block;
    width: 100%;
    height: 100%;
    text-align:center;
    font-size:14px;
    line-height: 50px;
}
.weight .weight-bottom .weight-num{
    width:30%;
    height:30px;
    margin-left:35%;
    margin-top:10px;
    font-size:16px;
    line-height: 30px;
    color:#d7d6db;
    text-align:center;
    outline:none;
    background:none;
    border-radius: 10px;
}
.weight .weight-bottom .btn{
    width:25px;
    height:30px;
    color:#d7d6db;
    text-align:center;
    outline:none;
    border-radius: 50%;
    border:none;
    background: none;
    position:absolute;
    top:10%;
    right:25%;
}
.weight .weight-bottom .btn.active{
    background-position:-149px 0 ;
    background-repeat:no-repeat;
    background-size:  300px 40px;
}
.hide{
    display:none;
}
.show{
    display:block;
}
</style>
